<template>
  <view class="input-top-box">
    <!-- 第一步 -->
    <view v-if="stepIndex === 0">
      <uni-nav-bar fixed :border="false" background-color="transparent" left-icon="left" height="120rpx"
                   @clickLeft="onBack"></uni-nav-bar>

      <view class="card-container">
        <view class="title">{{ $t(isEnterprise ? 'apply.title5' : 'apply.title4') }}</view>

        <cb-input v-model="formData.bankName" :title="$t('bank.name.1')" :placeholder="$t('bank.name.10')"
                  style="margin: 42rpx 0 28rpx" />
        <cb-input v-model="formData.accountHolderName" :title="$t('bank.name.2')" :placeholder="$t('bank.name.11')" />
        <cb-input v-model="formData.bankAccount" type="number" :title="$t('bank.name.3')"
                  :placeholder="$t('bank.name.12')" style="margin-top: 28rpx" />

        <!-- <view class="title">
        {{ $t('bank.name.5') }}
      </view> -->
        <view class="public-btn">
          <view class="btn-box">
            <button type="primary" class="bottom-btn" @click="onValidationsData(1)">
              {{ $t('next') }}
            </button>
          </view>
        </view>
      </view>
    </view>
    <!-- 第二步 -->
    <view v-if="stepIndex === 1" style="padding: 0 34rpx;">
      <uni-nav-bar fixed :border="false" background-color="transparent" left-icon="left" height="120rpx"
                   @clickLeft="stepIndex = 0"></uni-nav-bar>


      <!-- <view style="display: flex; justify-content: space-between; align-items: center;">
        <filePicker v-model="formData.bankCard" :title="$t('bank.name.4')" type="idCard" style="margin: 80rpx 0" />

        <filePicker v-model="formData.videoUrl" :title="$t('bank.name.5')" type="video" />
      </view> -->
      <view class="public-box finally-box">
        <filePicker v-model="formData.bankCard" type="idCard" :title="$t(isEnterprise ? 'bank.name.27' : 'bank.name.4')" :textState="isEnterprise ? '6' : '3'" />

        <view class="public-btn">
          <view class="btn-box">
            <button type="primary" class="bottom-btn" @click="onValidationsData(2)">
              {{ $t('next') }}
            </button>
          </view>
        </view>
      </view>

    </view>
    <!-- 第三步 -->
    <view v-if="stepIndex === 2" style="padding: 0 34rpx;">
      <uni-nav-bar fixed :border="false" background-color="transparent" left-icon="left" height="120rpx"
                   @clickLeft="stepIndex = 1"></uni-nav-bar>

      <view class="public-box finally-box">
        <filePicker v-model="formData.videoUrl" type="video" :title="$t(isEnterprise ? 'bank.name.28' : 'bank.name.5')" :textState="isEnterprise?'7':'4'" />

        <view class="public-btn">
          <view class="btn-box">
            <button type="primary" class="bottom-btn" @click="onSubmit">
              {{ $t('apply.submit') }}
            </button>
          </view>
        </view>
      </view>

    </view>
  </view>
</template>

<script setup>
import filePicker from '@/components/file-picker.vue'
import { onLoad } from '@dcloudio/uni-app'
import { getApplyInfo, getApplyEnterprise, updateApply } from '@/api'
import { ref, reactive } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const stepIndex = ref(0)

const formData = reactive({
  // 身份证正面
  idCardFront: [],
  // 身份证反面
  idCardBack: [],
  // 手持居住证
  residencePermit: [],
  // 银行卡照片
  bankCard: '',
  // 小额交易视频
  videoUrl: '',
  // 银行名称
  bankName: '',
  // 户主姓名
  accountHolderName: '',
  // 银行账号
  bankAccount: ''
})

/** 用户申请信息 */
const userData = ref({})

const onBack = () => {
  if (isEdit.value) {
    uni.redirectTo({
      url: `/pages/success-page/success-page?state=${userData.value.status}${isEnterprise.value ? '&type=enterprise' : ''
        }`
    })
  } else {
    uni.redirectTo({
      url: `/pages/success-page/success-page?state=3${isEnterprise.value ? '&type=enterprise' : ''
        }`
    })
  }
}

const onValidationsData = (index) => {
  const e = formData
  if (index === 1) {
    if (!e.bankName) {
      uni.showToast({
        title: t('bank.name.10'),
        icon: 'none'
      })
      return
    }
    if (!e.accountHolderName) {
      uni.showToast({
        title: t('bank.name.11'),
        icon: 'none'
      })
      return
    }
    if (!e.bankAccount) {
      uni.showToast({
        title: t('bank.name.12'),
        icon: 'none'
      })
      return
    }

  }

  if (index === 2) {
    if (e.bankCard.length === 0) {
      uni.showToast({
        title: t(isEnterprise.value ? 'bank.name.29' : 'bank.name.13'),
        icon: 'none'
      })
      return
    }
  }


  stepIndex.value = index


}

/** 提交表单 */
const onSubmit = async () => {
  const e = formData


  if (e.videoUrl.length === 0) {
    uni.showToast({
      title: t(isEnterprise.value ? 'bank.name.30' : 'bank.name.14'),
      icon: 'none'
    })
    return
  }

  onHttpSubmit()
}

const onHttpSubmit = async () => {
  try {
    uni.showLoading({
      title: t('loading.title'),
      mask: true // 防止触摸穿透
    })
    const e = formData

    const data = isEnterprise.value
      ? {
        ...userData.value,
        bankAccountImage: e.bankCard,
        videoUrl: e.videoUrl,
        bankName: e.bankName,
        bankAccount: e.bankAccount,
        accountName: e.accountHolderName,
        status: 6
      }
      : {
        ...userData.value,
        bankAccountImage: e.bankCard,
        videoUrl: e.videoUrl,
        bankName: e.bankName,
        accountHolderName: e.accountHolderName,
        bankAccount: e.bankAccount,
        status: 6
      }

    await updateApply(data, isEnterprise.value)
    uni.reLaunch({
      url: `/pages/success-page/success-page?state=6${isEnterprise.value ? '&type=enterprise' : ''
        }`
    })
  } catch (error) {
    uni.hideLoading()
  }
}

const isEnterprise = ref(false)
/** 是否编辑状态 */
const isEdit = ref(false)
onLoad(async (e) => {
  // e.type === 'enterprise' 为企业申请
  isEdit.value = e.edit == 1
  const isShow = e.type === 'enterprise'
  isEnterprise.value = isShow

  const res = isShow ? await getApplyEnterprise() : await getApplyInfo()
  userData.value = res

  if (isEdit.value) {
    if (isShow) {
      // 回显有问题图片跟视频需要修复回显问题
      // formData.idCardFront = [res.idCardFrontImage]
      // formData.residencePermit = [res.residencePermitPhoto]
      // formData.bankCard = [res.bankAccountImage]
      // formData.videoUrl = [res.videoUrl]
      formData.bankName = res.bankName
      formData.accountHolderName = res.accountName
      formData.bankAccount = res.bankAccount
      formData.bankCard = res.bankAccountImage
      formData.videoUrl = res.videoUrl
    } else {
      formData.bankName = res.bankName
      formData.accountHolderName = res.accountHolderName
      formData.bankAccount = res.bankAccount
      formData.bankCard = res.bankAccountImage
      formData.videoUrl = res.videoUrl
    }
  }
})
</script>

<style lang="scss" scoped>
.input-top-box {
  background: url('/static/bg/bg-top.png') no-repeat top center;
  background-size: 100%;
}

.card-container {
  padding: 32rpx;
  height: calc(100vh - 184rpx);

  .title {
    margin-bottom: 48rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 40rpx;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }


  .text-box {
    background: #fff;
    border-radius: 16rpx;
    padding: 28rpx 36rpx;

    .des {
      max-height: 840rpx;
      overflow: auto;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      line-height: 42rpx;
      font-size: 28rpx;
      color: #999999;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .checkbox-text {
      margin-top: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #666666;
      text-align: left;
      font-style: normal;
      text-transform: none;
      display: flex;
      align-items: center;
    }
  }
}

.top-box {
  display: flex;
  justify-content: space-between;
}

.finally-box {
  // margin-bottom: 300rpx;
  padding-bottom: 200rpx;

  :deep(.cb-input),
  :deep(.cb-selection) {
    margin-top: 10rpx !important;
  }
}

.bottom-btn {
  margin: 120rpx 0 80rpx;
  height: 100rpx;
  line-height: 100rpx;
  background: #3462fe;
  border-radius: 64rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 32rpx;
  color: #ffffff;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
</style>
